import { StatusBar } from 'expo-status-bar';
import { Animated, Button, StyleSheet, Text, View, useAnimatedValue } from 'react-native';
import ZhLogin from './pages/ZhLogin';

export default function App() {
  let opa = useAnimatedValue(1)    //动画相关的初始化状态变量，此处表示不透明的值，初始值为1

  return (
    <View style={{ gap: 20, margin: 50 }}>
      <Button title='又不透明变透明' onPress={() => {
        Animated.timing(opa, {//指定需要改变的变量
          toValue: 0,//动画结束时的状态opa的值
          duration: 2000,//动画耗时，毫秒
          useNativeDriver: true,//是否使用原生系统的动画绘制功能
        }).start()
      }} />
      <Button title='由透明变不透明' onPress={() => {
        Animated.timing(opa, {//指定需要改变的变量
          toValue: 1,//动画结束时的状态opa的值
          duration: 2000,//动画耗时，毫秒
          useNativeDriver:true,
        }).start()
      }} />
      {/* 一个可以产生动画的组件 */}
      <Animated.View style={[ss.box, { opacity: opa }]}>
        <Text>动画目标元素</Text>
      </Animated.View>
    </View>

  );
}

const ss = StyleSheet.create({
  box: {
    backgroundColor: '#090',
    width: 200,
    height: 100,
  },
});
